<template>
  <div class="interface-details">
      <div class="title">基本信息</div>
      <el-row class="api_info">
        <el-col :span="12">API名称：<span>{{node.siaName}}</span></el-col>
        <el-col :span="12">发布日期：<span>{{node.siaCreateTimeStr}}</span></el-col>
      </el-row>
      <el-row class="api_info">
        <el-col :span="12">REST API：<span>{{node.siaPath}}</span></el-col>
        <el-col :span="12">请求方式：<span>{{node.siaHttpMethod}}</span></el-col>
      </el-row>
      <el-row class="api_info">
        <el-col :span="12">服务描述：<span>{{node.siaDesc}}</span></el-col>
      </el-row>
      <div class="title">请求参数</div>
        <div class="request">
          <ul v-if="isRefresh">
            <li class="th">
              <span>参数名</span>
              <span>参数类型</span>
              <span>数据类型</span>
              <span>描述</span>
            </li>
            <li class="td" v-for="(item,index) in siaRequestData" :key="index">
              <div class="parameter-list" @click="openDataJsonStyle(item,index)">
                <span>{{item.name}}</span>
                <span>{{item.httpType}}</span>
                <span>{{item.type}}</span>
                <span>{{item.desc}}</span>
              </div>
              <div class="body-box cf" :class="{'active':item.isShowData}">
                <div class="left-json-desc fl">
                  <!--<pre>{{requestData}}</pre>-->
                  <show-json-desc  :jsonObject="descList"/>
                </div>
                <div class="right-json-details fr">
                  <pre>{{requestDataJson}}</pre>
                </div>
              </div>
            </li>
          </ul>
        </div>
      <div class="title">响应参数</div>
    <div class="request">
      <ul v-if="isRefresh">
        <li class="th">
          <span>参数名</span>
          <span>参数类型</span>
          <span>数据类型</span>
          <span>描述</span>
        </li>
        <li class="td" v-for="(item,index) in siaResponseData.detail" :key="index">
          <div class="parameter-list" @click="openResponseData(item,index)">
            <span>{{item.name}}</span>
            <span>{{item.httpType}}</span>
            <span>{{item.type}}</span>
            <span>{{item.desc}}</span>
          </div>
          <div class="body-box cf" :class="{'active':item.isShowData}">
            <div class="left-json-desc fl">
              <show-json-desc  :jsonObject="descList"/>
            </div>
            <div class="right-json-details fr">
              <pre>{{siaResponseDataJson}}</pre>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import ShowJsonDesc from './ShowJsonDesc'
import {jsonMain, jsonBody} from '@/libs/utils'
  export default {
    name:'interfaceDetails',
    components:{
      ShowJsonDesc
    },
    props:{
      node:{
        type:Object,
        default:()=>{},
        required: true
      }
    },
    data(){
      return {
        requestData:{},
        requestDataJson:{},
        isRefresh:true,
        descList:{},
        siaRequestData:[],
        siaResponseData:{},
        siaResponseDataJson:{}
      }
    },
    created(){
      if(typeof(this.node.siaRequestData)=='string') {
        this.siaRequestData = JSON.parse(this.node.siaRequestData)
      }else {
        this.siaRequestData = this.node.siaRequestData
      }
      if(typeof(this.node.siaResponseData)=='string'){
        this.siaResponseData=JSON.parse(this.node.siaResponseData)
      }else{
        this.siaResponseData=this.node.siaResponseData
      }
      console.log(this.node)
    },
    methods:{

      /**点击展开请求body数据格式**/
      openDataJsonStyle(item,index){
        console.log(item);
        if(item.httpType=="body" && !item.isLeaf){
          //循环付值isShowData
          let descTemp = {};
          this.requestDataJson[item.name] = JSON.parse(this.node.siaRequestDataJson)[item.name];
          this.siaRequestData.forEach((e,i)=>{
            if(!e.isShowData){
              e.isShowData=false
            }
            if(index==i){
              if(this.siaRequestData[index].isShowData){
                this.siaRequestData[index].isShowData=false
              }else{
                this.siaRequestData[index].isShowData=true
              }
            }
            if (e.leaf && !e.detail) {
              let json = jsonBody(e);
              for (let i in json) {
                descTemp[i] = json[i];
              }
            }
            else {
              descTemp = jsonMain(e);
            }
          })
          this.descList = descTemp
          //刷新
          this.isRefresh=false
          this.$nextTick(()=>{
            this.isRefresh=true
          })
        }else{
          this.$message({
            message: '最终的数据格式',
            type: 'warning'
          });
        }
      },
      /**点击展开返回body数据格式**/
      openResponseData(item,index){
        if(!item.isLeaf) {
          let descTemp = {}
          this.siaResponseDataJson[item.name] = JSON.parse(this.node.siaResponseDataJson)[item.name];
          // this.siaResponseDataJson = this.node.siaResponseDataJson instanceof Object ? this.node.siaResponseDataJson:JSON.parse(this.node.siaResponseDataJson)
          this.siaResponseData.detail.forEach((e, i) => {
            if(!e.isShowData){
              e.isShowData = false
            }
            if(index == i) {
              if(this.siaResponseData.detail[index].isShowData){
                this.siaResponseData.detail[index].isShowData = false
              }else{
                this.siaResponseData.detail[index].isShowData = true
              }
            }
            if (e.leaf && !e.detail) {
              let json = jsonBody(e);
              for (let i in json) {
                descTemp[i] = json[i];
              }
            } else {
              descTemp = jsonMain(e);
            }
          })
          this.descList = descTemp
          //刷新
          this.isRefresh = false
          this.$nextTick(() => {
            this.isRefresh = true
          })
        }else{
          this.$message({
            message: '最终的数据格式',
            type: 'warning'
          });
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .cf:after{content:'';clear:both;display: table;}
  .fl{float:left}
  .fr{float:right}
  .interface-details{padding: 5px 0 30px 15px;
    .title{font-size: 18px;color: #409eff;font-weight: bolder;}
    .api_info{padding:7px 0;color: #99a9bf;
      span{color:#333;padding-left:10px;}
    }
    .request{padding:10px 15px 10px 0px;
      .th{padding:3px 0;border-bottom:1px solid #ccc;
        span{display: inline-block;width:24%;color:#99a9bf;font-weight:bold;font-size:14px;}
      }
      .td{padding:5px 0;border-bottom:1px solid #f2f2f2;
        &:hover{background:#ecf5ff;cursor: pointer;}
        span{display: inline-block;width:24%;color:#333;font-size:14px;}
        .parameter-list{

        }
      }
      .body-box{margin-top:5px;display: none;
        .left-json-desc{width:46%;background: #f4f4f5;padding:20px;font-size:12px;color:#666;}
        .right-json-details{width:46%;background: #f4f4f5;padding:20px;font-size:12px;color:#666;}
      }
      .active{display: block;height:auto;}
    }
  }
</style>
